<template>
  <el-dialog width="800px" :title="$t('m.sigin.containertype')" :visible.sync="dialogVisible" :before-close="close">
    <!-- tool start -->
    <el-form ref="form" size="mini" :rules="ruleForm" :model="formInline" label-width="140px">
      <el-row>
        <el-col :span="22" :offset="1">
          <el-form-item :label="$t('m.container.containertypename')" prop="containertypename">
            <el-input maxlength="20" show-word-limit v-model.trim="formInline.containertypename"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="22" :offset="1">
          <el-form-item :label="$t('m.container.containertypecode')" prop="containertypecode">
            <el-input maxlength="4" show-word-limit v-model="formInline.containertypecode" class="uppercase"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="22" :offset="1">
          <el-form-item :label="$t('m.warehouse')">
            <el-input maxlength="20" show-word-limit v-model="formInline.warehousename" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18" :offset="1">
          <el-form-item :label="$t('m.container.size')">
            <el-col :span="8" class="el-col-flex">
              <el-form-item :label="$t('m.length')" prop="extent" label-width="50px">
                <el-input maxlength="3" show-word-limit v-model.trim="formInline.extent" v-input-valid></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="el-col-flex">
              <el-form-item :label="$t('m.width')" prop="width" label-width="50px">
                <el-input maxlength="3" show-word-limit v-model.trim="formInline.width" v-input-valid></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="el-col-flex">
              <el-form-item :label="$t('m.height')" prop="height" label-width="50px">
                <el-input maxlength="3" show-word-limit v-model.trim="formInline.height" v-input-valid></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="4" class="size-total">{{parseFloat(formInline.extent*formInline.width*formInline.height)||0}}&nbsp;cm<sup>3</sup></el-col>
        <el-col :span="20" :offset="1">
          <el-form-item :label="$t('m.container.maxweight')" prop="maxweight">
            <el-input maxlength="20" show-word-limit v-model.trim="formInline.maxweight" v-input-valid></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2" class="size-total">kg</el-col>
        <el-col :span="22" :offset="1">
          <el-form-item :label="$t('m.remark')">
            <el-input
              type="textarea"
              maxlength="100"
              show-word-limit
              v-model="formInline.remark"
              :rows="2">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->
    <el-row>
      <el-button size="mini" type="primary" @click="save">确定</el-button>
      <el-button size="mini" @click="close">关闭</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import {formValidate} from '@/assets/mixins/rule/type-setting-validate'
export default {
  name:'inventory-details-popup',
  props:['dialogVisible','detail'],
  mixins:[formValidate],
  data(){
    return {
      formInline:{
        warehousename:this.$store.state.basicInfo.warehouseInfo.name, // 所属仓库名称
        extent:'', // 长
        width:'', // 宽
        height:'', // 高
        maxweight:0, // 最大放货重量
        remark:'', // 备注
        containertypename:'', // 容器类型name
        containertypecode:'' // 容器类型code
      }
    }
  },
  mounted(){
    if(this.detail)
      this.formInline = Object.assign(this.formInline,this.detail)
  },
  methods:{
    close(){
      this.$emit('close')
    },
    // 限制只能输入正整数
    validateNumber(key){
      this.$set(this.formInline,key,this.formInline[key].replace(/[^\d]/g,''))
    },
    save(){
      let containertypecode = this.formInline.containertypecode.toUpperCase() // 容器类型码要转大写
      this.$refs['form'].validate((valid)=>{
        if(valid) this.$emit('save',Object.assign({},this.formInline,{containertypecode}))
      })
    }
  }
}
</script>
<style lang="scss" scoped>
li{line-height: 2; cursor: pointer;}
.el-divider__text{font-size: 18px;}
.el-form-item{
  .el-col-flex{
    display: flex; word-break: keep-all; padding: 0 10px;
    ::v-deep .el-form-item{margin-bottom: 0;}
  }
  .el-col-flex:first-child{padding-left: 0;}
  .el-col-flex:last-child{padding-right: 0;}
}
.size-total{
  line-height: 28px; margin-bottom: 18px;
  sup{line-height: 1;}
}
.el-select{width: 100%;}
.uppercase ::v-deep .el-input__inner {
  text-transform: uppercase;
}
</style>